<template>
  <!-- 日志信息 -->
  <div class="container">
    <el-table  :data="logDataSource" :header-cell-style="{ background: '#fbfbfa', height: '60px' }"  class="tableBottom" @row-click="clickRowHandle" row-key="LogMessage"
      :expand-row-keys="expands">
      <el-table-column prop="LogTime" label="日志时间" :formatter="dateFormat" align="center" width="160px">
      </el-table-column>
      <el-table-column prop="LogLevel" label="日志级别" align="center" width="160px">
        <template #default="{ row }">
          {{ logInfo(row.LogLevel) }}
        </template>
      </el-table-column>
      <el-table-column prop="LogSource" label="日志来源" align="center" width="160px">
      </el-table-column>
      <el-table-column prop="LogMessage" label="日志信息" width="900px">
      </el-table-column>
      <!-- <el-table-column prop="ReportTime" label="上报时间" :formatter="dateFormat" align="center"> -->
      <!-- </el-table-column> -->
      <el-table-column type="expand" label="详情" width="120px">
        <template #default="{ row }">
          {{ row.LogDetails ? row.LogDetails : '暂无详情' }}
        </template>
      </el-table-column>
      <el-table-column>
        <template #empty>
          <p v-if="!logDataSource">暂无数据奥</p>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed, onBeforeUnmount } from "vue";
import moment from 'moment'
const props = defineProps(["logDataSource"])
const prop = ref<any>(props)
const dateFormat = (row: any, column: any) => {
  const date = row[column.property]
  if (date === undefined) {
    return ''
  }
  // moment(date).format('YYYY-MM-DD HH:mm:ss')
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}

const logInfo = (Desc: any) => {
  if (!Desc) return
  const statusList = [
    { nameDesc: '错误', Desc: 'Error' },
    { nameDesc: '信息', Desc: 'Information' },
    { nameDesc: '警告', Desc: 'Warning' }
  ]
  const foramtData: any = statusList.find((item) => item.Desc == Desc)
  return foramtData.nameDesc
}


const expands = ref<any>([])


const clickRowHandle = (row: any, column: any, event: any) => {
  if (expands.value.includes(row.LogMessage)) {
    expands.value = expands.value.filter((val: any) => val !== row.LogMessage);
  } else {
    expands.value.push(row.LogMessage);
  }
}

</script>

<style scoped>
@media screen and (max-height: 1440px) {
  .tableBottom {
    height: 970px;
  }


}

@media screen and (max-height: 1080px) {
  .tableBottom {
   height: 600px;
  }
}
</style>